<template>
	<view >
		<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block>
			<block slot="content">创建{{cstype}}</block>
		</cu-custom>
		<view class="create-cs-tips">带*为必填项</view>
		<view class="create-cs-form">
			
			<view class="cu-form-group">
				<view class="create-cs-title">名称</view>
				<input class="text-right" placeholder="输入名称" @input="Ics_name" name="input"></input>
			</view>
			
			<view class="cu-form-group">
				<view class="create-cs-title">管理员</view>
				<input class="text-right" placeholder="管理员姓名" @input="Ics_managename" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="create-cs-title">联系方式</view>
				<input class="text-right" placeholder="管理员电话" @input="Ics_managetel" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="create-cs-title">自有球场</view>
				<input placeholder="数量" @input="Ics_parknum" name="input"></input>
				带顶棚的<input class="cs-indonum" @input="Ics_indoornum" placeholder="数量" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="create-cs-title">logo</view>
				<image class="cs-logo" :src="cs_logo"></image>
				<button class="cg-btn bg-blue round sm cs-logo-choose" @click="Ics_logo">选择</button>
			</view>
			<view class="cu-form-group">
				<view class="title">成立时间</view>
				<picker mode="date" :value="date" :end="now" @change="DateChange">
					<view class="picker">
						{{date}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="create-cs-title">城市</view>
				<picker mode="region" @change="RegionChange" :value="region">
					<view class="picker">
						{{region[0]}}，{{region[1]}}，{{region[2]}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group bg-white">
				<view class="create-cs-title">详细地址</view>
				<input class="text-right" placeholder="也可是常活动地址" @input="Ics_addr" name="input"></input>
			</view>
			<view class="create-cu-des">
				<view class="title">简介</view>
				<textarea class="cs-des" maxlength="-1"  @input="ItxtArDes"></textarea>
				
				
				<view class="title">宗旨</view>
				<textarea class="cs-des" maxlength="-1"  @input="ItxtArPurpose" ></textarea>
				
			
				<view class="title">近期公告</view>
				<textarea class="cs-des" maxlength="-1"  @input="ItxtArTips" ></textarea>
				
			</view>
			<view class="cu-bar bg-white">
				<view class="action">
					宣传图片
				</view>
				<view class="action">
					{{imgList.length}}/4
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
					 <image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="create-cs-button">
			<button class="bg-blue" @tap="create_cs_sure">确认创建</button>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(e){
			this.type=e.type;
			if(this.type==1){
				this.cstype="俱乐部";
			}else{
				this.cstype="协会";
			}
			this.userid=uni.getStorageSync("uid");
			this.openid=uni.getStorageSync('openid');
			if(this.userid.length<=0 || this.openid.length<=0){
				uni.showModal({
				    title: '提示',
				    content: '您暂未登陆,是否马上登陆',
				    success: function (res) {
				        if (res.confirm) {
							uni.switchTab({
								url:"/pages/tennis/user/index"
							})
				        } else if (res.cancel) {
				           uni.navigateBack({
				           	
				           })
				        }
				    }
				});
				return;
			}
			
		},
		data() {
			return {
				userid:"",
				openid:"",
				type:1,
				region:['福建省','福州市','闽侯县'],
				imgList: [],
				modalName: null,
				txtArDes: '',
				txtArPurpose: '',
				txtArTips: '',
				cstype:'俱乐部',
				now:new Date().getDate(),
				date: '2018-12-25',
				uploadimg:'',
				cs_name:'',
				cs_managename:'',
				cs_managetel:'',
				cs_parknum:'',
				cs_indoornum:'',
				cs_addr:'',
				cs_logo:''
				
			}
		},
		methods: {
			RegionChange(e) {
				this.region = e.detail.value
			},
			DateChange(e) {
				this.date = e.detail.value
			},
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						uni.uploadFile({
							url: 'https://www.52tennis.cn/ImgUpload/uploadimg', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							fileType:'image',
							name: 'data',
							success: (uploadFileRes) => {
								let result = JSON.parse(uploadFileRes.data)
								console.log("结果:"+result.result)
								if(result.result==1){
									console.log("1");
									if(this.uploadimg.length>0){
										this.uploadimg=this.uploadimg+";"+result.returnjson;
									}else{
										this.uploadimg=result.returnjson;
									}
									console.log("11"+this.uploadimg);
								}
								console.log(uploadFileRes.data);
							}
						});
						
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这张图片吗？',
					cancelText: '再看看',
					confirmText: '是的',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
							let imgs = this.uploadimg.split(";");
							let newimglist = "";
							for(let i = 0;i<imgs.length;i++){
								if(i==e.currentTarget.dataset.index){
									
								}else{
									newimglist+=imgs[i]+";";
								}
							}
							if(newimglist.length>0){
								this.uploadimg=newimglist.substring(0,newimglist.length-1);
							}else{
								this.uploadimg="";
							}
						}
					}
				})
			},
			ItxtArDes(e) {
				this.txtArDes = e.detail.value
			},
			ItxtArPurpose(e) {
				this.txtArPurpose = e.detail.value
			},
			ItxtArTips(e){
				this.txtArTips=e.detail.value;
			},
			Ics_name(e){
				this.cs_name=e.detail.value;
			},
			Ics_managename(e){
				this.cs_managename=e.detail.value;
			},
			Ics_managetel(e){
				this.cs_managetel=e.detail.value;
			},
			Ics_indoornum(e){
				this.cs_indoornum=e.detail.value;
			},
			Ics_parknum(e){
				this.cs_parknum=e.detail.value;
			},
			Ics_addr(e){
				this.cs_addr=e.detail.value;
			},
			Ics_logo(e){
				
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						uni.showLoading({
							title:'图片加载中..'
						})
						uni.uploadFile({
							url: 'https://www.52tennis.cn/ImgUpload/uploadimg', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							fileType:'image',
							name: 'data',
							success: (uploadFileRes) => {
								let result = JSON.parse(uploadFileRes.data)
								console.log("结果:"+result.result)
								if(result.result==1){
									this.cs_logo=this.websiteUrl+result.returnjson;
								}
							},
							complete:()=>{
								uni.hideLoading()
							}
						});
					}
				});
			},
			
			create_cs_sure(e){
				let haspark=0;
				if(this.cs_parknum>0 || this.cs_indoornum>0){
					haspark=1;
				}
				
				if(this.cs_name.length<=0 || this.cs_managename.length<=0 || this.cs_managetel.length<=0 || this.cs_addr.length<=0 || this.cs_parknum.length<=0 || this.cs_indoornum.length<=0 || this.cs_logo.length<=0){
					uni.showModal({
					    title: '创建失败',
					    content: "请将带*信息填写完整",
					    success: function (res) {
					        if (res.confirm) {
					        } else if (res.cancel) {
					        }
					    }
					});
					return;
				}
				
				var reg=new RegExp("^[0-9]*$");
				if(!reg.test(this.cs_parknum) || !reg.test(this.cs_indoornum)) {
					uni.showModal({
					    title: '创建失败',
					    content: "球场数量只能为数字",
					    success: function (res) {
					        if (res.confirm) {
					        } else if (res.cancel) {
					        }
					    }
					});
					return;
				}
				var reg=/^1[3456789]\d{9}$/;
				if(!reg.test(this.cs_managetel)){
				//var mobilereg = new RegExp("^1[3456789]\d{9}$");
				//if(!mobilereg.test(this.cs_managetel)){
					uni.showModal({
					    title: '创建失败',
					    content: "联系方式输入错误",
					    success: function (res) {
					        if (res.confirm) {
					        } else if (res.cancel) {
					        }
					    }
					});
					return;
				}
				
				
				uni.request({
					url:"https://www.52tennis.cn/Club_Soci/InsertClub_Soci",
					header:{
						'Content-Type': 'application/json;charset=UTF-8' //自定义请求头信息
					},
					method:'POST',
					data: {
						userid:this.userid,
						"name" :this.cs_name,
						"province":this.region[0],
						"city":this.region[1],
						"address" :this.region[2]+""+this.cs_addr,
						"manager_name":this.cs_managename,
						"manager_tel" :this.cs_managetel,
						"has_park" :haspark,
						"park_num" :this.cs_parknum,
						"indoorpark_num":this.cs_indoornum,
						"logo_url" :this.cs_logo,
						"mark_date":this.date,
						"purpose" :this.txtArPurpose,
						"introduction" :this.txtArDes,
						"tips" :this.txtArTips,
						"imgurl" :this.uploadimg,
						"type":this.type
					},success:(data)=> {
						if(data.data.result==1){
							uni.showToast({
								title: '创建成功',
								icon: 'success',
								mask: true,
								duration: 3000
							})
							setTimeout(function(){
								uni.navigateTo({
									url:"/pages/tennis/club_soci/index"
								})
							},2000)
							
						}else{
							uni.showModal({
							    title: '创建失败',
							    content: data.data.msg+",是否继续创建",
							    success: function (res) {
							        if (res.confirm) {
							           
							        } else if (res.cancel) {
							           uni.navigateTo({
							           		url:"/pages/tennis/club_soci/index"
							           })
							        }
							    }
							});
						}
					}
				})
			}
		}
	}
</script>

<style>
	.cs-logo{
		width:80rpx;
		height:80rpx;
		border-radius: 20rpx;
		margin-left: 50%;
	}
	.cs-logo-choose{
		height:60rpx;
		line-height: 60rpx;
		font-size: 26rpx;
	}
	.create-cs-tips{
		padding-left: 30rpx;
		height: 40rpx;
		font-size: 28rpx;
		color: #ED1C24;
	}
	.create-cs-title{
		margin-right: 30rpx;
	}
	.create-cs-title::before{
		content: '*';
		color: #ED1C24;
	}
	.cs-indonum{
		margin-left: 30rpx;
	}
	.create-cu-des {
		padding:0rpx 30rpx;
		background-color: white;
		border-top: 1rpx solid #eee;
	}
	.create-cu-des .title{
		padding: 10rpx 10rpx;
	}
	.cs-des{
		border: 1px solid #808080;
		padding:15rpx;
		border-radius: 15rpx;
		width:100%;
		height: 180rpx;
		overflow: auto;
		word-break: break-all;
	}
</style>
